// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.chat-join-channel {
  display: flex;
  flex-direction: column;
  height: 100%;

  background: hsl(var(--hsl-b4));

  &__channel {
    .reset-input();
    .link-plain();

    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 3;
    color: hsl(var(--hsl-l3));
    text-align: left;
    padding: 5px 10px;

    .link-hover({
      color: hsl(var(--hsl-c1));
      background-color: hsl(var(--hsl-b3));
    });

    &--joined {
      color: hsl(var(--hsl-c1));
    }
  }

  &__channels {
    display: grid;
    column-gap: 10px;

    // checkmark is 14px wide
    grid-template-columns: minmax(14px, max-content) auto 1fr;

    overflow-wrap: anywhere;
    overflow-y: auto;
  }

  &__loading {
    .center-content();
    flex-direction: column;
    flex: 1;
  }
}
